<template>
	<view class="page-index">
		<!-- <HeadCustom></HeadCustom> -->
		<view class="head" :style="{ marginTop: statusBarHeight + 'px',height: 80 + 'rpx',lineHeight:80 + 'rpx'}">
			<!-- <view class="left">
				左边
			</view> -->
			<view class="center">
				研如意
			</view>
		</view>
		<!-- <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button> -->

		<view class="top">
			<view class="title">
				百万考研数据支持 质量保障

			</view>
			<view class="buy">
				<view class="avatars">
					<image class="avatar" :src="avatars[avatarIndex]" mode=""></image>
					<image class="avatar" :src="avatars[avatarIndex + 1]" mode=""></image>
					<image class="avatar" :src="avatars[avatarIndex + 2]" mode=""></image>
					<image class="avatar" :src="avatars[avatarIndex + 3]" mode=""></image>
				</view>
				<view class="use-count">
					使用人数1万+
				</view>
				<view class="go-buy" @click="goBuy">
					立即购买
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="title">
				最新调剂信息
			</view>
			<view class="gx">
				实时更新
			</view>
			<view class="look" @click="goadjustlist">
				立即查看
			</view>
			<image class="image" src="https://pic.imgdb.cn/item/675d01f1d0e0a243d4e3cbb4.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="left">
				<view class="content-top" @click="golist">
					院校库
					<view class="text">
						查询院校专业 </br>
						往年录取情况
					</view>
					<image src="https://pic.imgdb.cn/item/675d3022d0e0a243d4e3d6aa.png" mode="widthFix"></image>
				</view>
				<view class="content-bottom">
					专业库
					<view class="text">
						专业维度查看</br>
						院校录取情况
					</view>
					<image src="https://pic.imgdb.cn/item/675d3048d0e0a243d4e3d6b8.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="right">
				调剂1v1指导
				<view class="text">
					全方位指导助力上岸
				</view>
				<image src="https://pic.imgdb.cn/item/675d303dd0e0a243d4e3d6b5.png" mode="widthFix"></image>
			</view>
		</view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>

	</view>
</template>

<script>
	import {
		requestLogin
	} from '@/utils/api.js'
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		mounted() {
			//必须放在mounted钩子函数最前面，不能放在调用其它方法后面，否则无效
			// let that = this
			// //获取手机系统信息
			const info = uni.getSystemInfoSync()
			// //设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			setInterval(() => {
				if (this.avatarIndex == this.avatars.length - 5) {
					this.avatarIndex = 0
				} else {
					this.avatarIndex++
				}

			}, 2000)
		},
		data() {
			return {
				statusBarHeight: 0,
				avatarIndex: 0,
				avatars: [
					'https://pic.imgdb.cn/item/675c54ebd0e0a243d4e3be2f.jpg',
					'https://pic.imgdb.cn/item/675b04b3d0e0a243d4e309c3.jpg',
					'https://pic.imgdb.cn/item/675aed27d0e0a243d4e304c0.jpg',
					'https://pic.imgdb.cn/item/675a614bd0e0a243d4e28641.jpg',
					'https://pic.imgdb.cn/item/675aa166d0e0a243d4e2beb9.jpg',
					'https://pic.imgdb.cn/item/675a3af3d0e0a243d4e20704.jpg',
					'https://pic.imgdb.cn/item/675a2941d0e0a243d4e1e50b.jpg',
					'https://pic.imgdb.cn/item/6759a3bfd0e0a243d4e1dbed.jpg',
					'https://pic.imgdb.cn/item/67598502d0e0a243d4e1d401.jpg',
					'https://pic.imgdb.cn/item/675912f7d0e0a243d4e1a9a3.jpg',
					'https://pic.imgdb.cn/item/67587ebfd0e0a243d4e1896d.jpg',
					'https://pic.imgdb.cn/item/675864d9d0e0a243d4e186bf.jpg',
					'https://pic.imgdb.cn/item/67581583d0e0a243d4e14f56.jpg',
					'https://pic.imgdb.cn/item/67580bfad0e0a243d4e12ec1.jpg',
					'https://pic.imgdb.cn/item/6757f3dad0e0a243d4e0fe82.jpg',
					'https://pic.imgdb.cn/item/6757af2bd0e0a243d4e0d4f3.jpg',
					'https://pic.imgdb.cn/item/6757080ed0e0a243d4e0b798.jpg',
					'https://pic.imgdb.cn/item/6756dc26d0e0a243d4e0ac4e.jpg',
					'https://pic.imgdb.cn/item/6756667bd0e0a243d4e02758.jpg',
					'https://pic.imgdb.cn/item/6756365ed0e0a243d4e0140d.jpg',
					'https://pic.imgdb.cn/item/6755a4ebd0e0a243d4e004d0.jpg',
					'https://pic.imgdb.cn/item/6755a820d0e0a243d4e00577.jpg',
					'https://pic.imgdb.cn/item/6756361ad0e0a243d4e01409.jpg',
					'https://pic.imgdb.cn/item/67559ed7d0e0a243d4e00320.jpg',
					'https://pic.imgdb.cn/item/67558829d0e0a243d4dffee8.jpg',
					'https://pic.imgdb.cn/item/675567f0d0e0a243d4dff81c.jpg',
					'https://pic.imgdb.cn/item/67556354d0e0a243d4dff61d.jpg',
					'https://pic.imgdb.cn/item/67551e0ed0e0a243d4dfda9b.jpg',
					'https://pic.imgdb.cn/item/6755168bd0e0a243d4dfd95f.jpg',
					'https://pic.imgdb.cn/item/67551b9dd0e0a243d4dfda40.jpg',
					'https://pic.imgdb.cn/item/6754edb0d0e0a243d4dfd623.jpg',
					'https://pic.imgdb.cn/item/675457aed0e0a243d4dfcc49.jpg',
					'https://pic.imgdb.cn/item/6754ec30d0e0a243d4dfd5fd.jpg',
					'https://pic.imgdb.cn/item/67505966d0e0a243d4dd8ee5.jpg'
				]
			};

		},
		methods: {
			async getToken() {
				let res = await requestLogin()
			},
			goadjustlist() {
				uni.navigateTo({
					url: '/schoolMsg/adjustMsg/index'
				})
			},
			goBuy() {
				uni.navigateTo({
					url: '/schoolMsg/buy/index'
				})
			},
			goStudentList() {
				console.log('goStudentListgoStudentList')
				uni.navigateTo({
					url: '/schoolMsg/studentList/index'
				})
			},
			golist() {
				uni.navigateTo({
					// url:'schoolMsg/'
					url: '/schoolMsg/schoolList/index'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-index {
		.head {
			position: relative;

			.left {
				position: absolute;
				left: 20rpx
			}

			.center {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			// display: flex;
			// justify-content: space-between;
		}

		overflow: hidden;
		min-height: 100vh;
		background: linear-gradient(to bottom, transparent, #fff 180%),
		radial-gradient(30% 800rpx at left top, #dafab7, transparent),
		radial-gradient(100% 800rpx at right top, #dbef55, transparent);

		.top {
			.title {
				font-weight: 700;
				font-size: 40rpx;
				line-height: 70rpx;
				text-align: center;
				margin-top: 30rpx;
			}

		}

		.buy {
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			width: 700rpx;
			line-height: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #f9fdf3;

			.avatars {
				display: flex;
				align-items: center;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-left: -20rpx;
					box-shadow: 0 0 0 4rpx #fff;
				}
			}

			.use-count {}

			.go-buy {
				color: #fff;
				background-color: #000000;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				border-radius: 30rpx;
			}
		}

		.banner {
			position: relative;
			width: 700rpx;
			margin: 20rpx auto 0;
			color: #fff;
			font-weight: 700;

			.title {
				position: absolute;

				font-size: 40rpx;
				left: 50rpx;
				top: 30rpx;
			}

			.gx {
				position: absolute;
				font-size: 32prx;
				left: 50rpx;
				top: 100rpx;
			}

			.look {
				background: #ff8d1a;
				position: absolute;
				// padding: 8rpx 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				width: 200rpx;
				text-align: center;
				left: 50rpx;
				bottom: 30rpx;
				border-radius: 0 35rpx 35rpx 35rpx;
			}

			image {
				width: 700rpx;
				// margin: 0 auto;
			}

		}

		.content {
			color: #fff;
			padding: 25rpx;
			display: flex;
			justify-content: space-between;
			height: 500rpx;

			.text {
				margin-top: 10rpx;
				color: #fff;
				font-size: 30rpx;
				font-weight: 400;
			}

			.left {
				font-weight: 700;
				font-size: 38rpx;
				width: 340rpx;

				.content-top {
					color: #da8e66;
					box-sizing: border-box;
					padding: 20rpx;
					position: relative;
					border-radius: 20rpx;
					height: 240rpx;
					background: linear-gradient(120deg, #ffe6db, #fff9f5);
					margin-bottom: 20rpx;

					image {
						width: 150rpx;
						position: absolute;
						right: 10rpx;
						bottom: 10rpx;
					}
				}

				.content-bottom {
					color: #d37bc5;
					box-sizing: border-box;
					padding: 20rpx;
					position: relative;
					border-radius: 20rpx;
					height: 240rpx;
					background: linear-gradient(120deg, #eabafc, #fbf3ff);

					image {
						width: 100rpx;
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
					}

				}

			}

			.right {
				font-size: 38rpx;
				color: #324ecf;
				font-weight: 700;
				box-sizing: border-box;
				padding: 20rpx;
				position: relative;
				width: 340rpx;
				background: linear-gradient(120deg, #dce2ff, #f7fdff);
				border-radius: 20rpx;

				image {
					position: absolute;
					width: 200rpx;
					right: 20rpx;
					bottom: 20rpx;
				}
			}
		}
	}
</style>